<template>
  <div>
    <div :style="{...styles, ...backStyles, textShadow: textShadowStr}"></div>
    <p :style="{...styles, ...fontStyles}"></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      styles: {
        color: "transparent",
        fontSize: "16px",
        fontFamily: "initial",
        letterSpacing: "0px",
        textAlign: "left",
        padding: "0px 0px 0px 0px",
      },
      backStyles: {
        position: "absolute",
        inset: 0,
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        borderRadius: "1px",
      },
      fontStyles: {
        position: "relative",
        zIndex: 10,
        backgroundImage: "linear-gradient(0deg, red, yellow)",
        "-webkit-background-clip": "text", 
        "-webkit-text-fill-color": "transparent"
      }
    }
  },
  computed: {
    textShadowStr() {
      let offsetDirectionArr = [
        [-1, -1],
        [-1, 1],
        [1, -1],
        [1, 1],
      ] // 四个偏移方向
      let offset = 1 // 偏移量
      let color = "rgba(45,128,228,1)"
      return offsetDirectionArr
        .map(v => {
          return v.map(t => t * offset + "px").join(" ") + " 4px " + color
        })
        .join()
    },
  },
}
</script>

<style scoped>
/* 引入字体 */
@import url("./IMG/font.css")
</style>
